  <template>
  <CustomTableCard 
    footer
    temporary 
    actions 
    :total="total" 
    :page.sync="queryParams.page" 
    :limit.sync="queryParams.limit" 
    :showDrawer.sync="showDrawer" 
    :width="1000"
    @on-page="getList" 
    @cancel="handleCancel"
    @ok="handleOk"
    title="编辑预订单">
    <div slot="header">
      <v-row>
        <v-col cols="2">
          <v-select
            v-model="queryParams.status"
            :items="[{name: '已审核', value: 1}, {name: '未审核', value: 2}]"
            label="选择状态"
            item-text="name"
            item-value="value"
            dense
            outlined
            hide-details
            @change="getList(1)"
          ></v-select>
        </v-col>
        <v-col cols="2">
          <v-select
            :items="['开始日期', '创建日期']"
            dense
            outlined
            hide-details
          ></v-select>
        </v-col>
        <v-col cols="3">
          <date-picker></date-picker>
        </v-col>
        <v-col cols="2">
          <v-text-field
            v-model="queryParams.keyword"
            label="关键字搜索"
            outlined
            dense
            hide-details
            clearable
          ></v-text-field>
        </v-col>
        <v-col>
          <v-btn color="info" class="mr-3" @click="getList(1)">{{ $t('actions.search') }}</v-btn>
        </v-col>
      </v-row>
    </div>
    <el-table
      ref="table"
      v-auto-height
      :height="tableHeight"
      :data="tableData"
      stripe
      border
      fit
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column
        type="selection"
        align="center"
        width="55"
      />
      <el-table-column label="预订单编号" fixed show-overflow-tooltip prop="name" width="180"></el-table-column>
      <el-table-column label="客户名称" prop="info_type_name"  width="140"></el-table-column>
      <el-table-column label="业务团号" prop="info_type_name" width="140"></el-table-column>
      <el-table-column label="费用规格" prop="info_type_name" width="140"></el-table-column>
      <el-table-column label="开始日期" prop="info_type_name" width="140"></el-table-column>
      <el-table-column label="结束日期" prop="info_type_name" width="140"></el-table-column>
      <el-table-column label="数量" prop="info_type_name" width="140"></el-table-column>
      <el-table-column label="天数" prop="info_type_name" width="140"></el-table-column>
      <el-table-column label="成本单价" prop="info_type_name" width="140"></el-table-column>
      <el-table-column label="采购单价" prop="info_type_name" width="140"></el-table-column>
      <el-table-column label="采购合计" prop="info_type_name" width="140"></el-table-column>
      <el-table-column label="额外费用" prop="info_type_name" width="140"></el-table-column>
      <el-table-column label="额外费用说明" prop="info_type_name" width="180"></el-table-column>
      <el-table-column label="应付总额" prop="info_type_name" width="140"></el-table-column>
      <el-table-column label="凭证号" prop="info_type_name" width="140"></el-table-column>
      <el-table-column label="业务类型" prop="info_type_name" width="140"></el-table-column>
      <el-table-column label="所属部门" prop="info_type_name" width="140"></el-table-column>
      <el-table-column label="预订人" prop="info_type_name" width="140"></el-table-column>
      <el-table-column
        prop="created_at"
        label="预订时间"
        width="180">
      </el-table-column>
      <el-table-column
        fixed="right"
        prop="status"
        label="状态"
        width="140">
        <template slot-scope="{ row }">
          <v-switch class="mt-0" dense hide-details :input-value="row.status == 1" :label="row.status == 1 ? '已审核' : '未审核'" @change="setStatus(row)"></v-switch>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        prop="address"
        label="操作"
        align="center"
        width="180">
        <template slot-scope="{ row }">
          <v-btn small color="info" class="mr-2" outlined @click="showDrawer = true">{{$t('actions.edit')}}</v-btn>
          <v-btn small color="warning" outlined @click="handleRmove(row)">{{$t('actions.delete')}}</v-btn>
        </template>
      </el-table-column>
    </el-table>
    <div slot="actions">
      <v-btn small color="warning" :disabled="!multipleSelection.length" @click="setStatusAll(2)">{{ $t('actions.delete') }}</v-btn>
    </div>
    <section slot="drawer" class="pa-3">
      <v-form
        ref="form"
        :lazy-validation="false"
      >
        <v-card class="mb-4">
          <v-card-title>预订单</v-card-title>
          <v-divider />
          <el-table
            :data="data">
            <el-table-column
              label="预订状态"
              width="120">
            </el-table-column>
            <el-table-column
              label="所属团号"
              width="120">
            </el-table-column>
            <el-table-column
              label="酒店名称"
              width="180">
              <template slot="header">
                <span class="mr-1">酒店名称</span>
                <small style="color: red">({{$t('other.required')}})</small>
              </template>
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="房型"
              width="140">
              <template slot="header">
                <span class="mr-1">房型</span>
                <small style="color: red">({{$t('other.required')}})</small>
              </template>
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="入住日期"
              width="180">
              <template slot="header">
                <span class="mr-1">入住日期</span>
                <small style="color: red">({{$t('other.required')}})</small>
              </template>
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="退房日期"
              width="180">
              <template slot="header">
                <span class="mr-1">退房日期</span>
                <small style="color: red">({{$t('other.required')}})</small>
              </template>
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="数量"
              width="100">
              <template slot="header">
                <span class="mr-1">数量</span>
                <small style="color: red">({{$t('other.required')}})</small>
              </template>
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="天数"
              width="100">
              <template slot="header">
                <span class="mr-1">天数</span>
                <small style="color: red">({{$t('other.required')}})</small>
              </template>
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="成本单价"
              width="140">
              <template slot="header">
                <span class="mr-1">成本单价</span>
                <small style="color: red">({{$t('other.required')}})</small>
              </template>
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="成本合计"
              width="140">
              <template slot="header">
                <span class="mr-1">成本合计</span>
                <small style="color: red">({{$t('other.required')}})</small>
              </template>
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="额外费用"
              width="140">
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="额外费用说明"
              width="180">
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="凭证号"
              width="180">
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="结算方式"
              width="180">
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="联系人"
              width="180">
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="联系电话"
              width="180">
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="备注"
              width="180">
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
          </el-table>
          <v-container class="pb-0">
            <v-row>
              <v-col cols="6" class="py-0 form-item-border">
                <v-row align="center" style="height: 100%;">
                  <label class="text-right flex-shrink-0" style="width: 140px;">币种：</label>
                  <div class="pr-4 flex-grow-1">
                    <v-select :items="['人民币·CNY', '泰铢·THB']"></v-select>
                  </div>
                </v-row>
              </v-col>
              <v-col cols="6" class="py-0 form-item-border">
                <v-row align="center" style="height: 100%;">
                  <label class="text-right flex-shrink-0" style="width: 140px;">汇率：</label>
                  <div class="pr-4 flex-grow-1">
                    <v-text-field v-model="baseInfo.code_a"></v-text-field>
                  </div>
                </v-row>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="6" class="py-0 form-item-border">
                <v-row align="center" style="height: 100%;">
                  <label class="text-right flex-shrink-0" style="width: 140px;">应付总额：</label>
                  <div class="pr-4 flex-grow-1">
                    <span>1</span>
                  </div>
                </v-row>
              </v-col>
              <v-col cols="6" class="py-0 form-item-border">
                <v-row align="center" style="height: 100%;">
                  <label class="text-right flex-shrink-0" style="width: 140px;">本币总额：</label>
                  <div class="pr-4 flex-grow-1">
                    <span>1</span>
                  </div>
                </v-row>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="6" class="py-0 form-item-border">
                <v-row align="center" style="height: 100%;">
                  <label class="text-right flex-shrink-0" style="width: 140px;">已付金额：</label>
                  <div class="pr-4 flex-grow-1">
                    <span>1</span>
                  </div>
                </v-row>
              </v-col>
              <v-col cols="6" class="py-0 form-item-border">
                <v-row align="center" style="height: 100%;">
                  <label class="text-right flex-shrink-0" style="width: 140px;">未付金额：</label>
                  <div class="pr-4 flex-grow-1">
                    <span>1</span>
                  </div>
                </v-row>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="6" class="py-0 form-item-border">
                <v-row align="center" style="height: 100%;">
                  <label class="text-right flex-shrink-0" style="width: 140px;">客户名称：</label>
                  <div class="pr-4 flex-grow-1">
                    <span>1</span>
                  </div>
                </v-row>
              </v-col>
              <v-col cols="6" class="py-0 form-item-border">
                <v-row align="center" style="height: 100%;">
                  <label class="text-right flex-shrink-0" style="width: 140px;">结算方式：</label>
                  <div class="pr-4 flex-grow-1">
                    <v-select :items="['公司支付', '泰铢·THB']"></v-select>
                  </div>
                </v-row>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="6" class="py-0 form-item-border">
                <v-row align="center" style="height: 100%;">
                  <label class="text-right flex-shrink-0" style="width: 140px;">预计结款日期：</label>
                  <div class="pr-4 flex-grow-1">
                    <date-picker type="date" v-model="baseInfo.order_date"></date-picker>
                  </div>
                </v-row>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12" class="py-0 form-item-border">
                <v-row align="center" style="height: 100%;">
                  <label class="text-right flex-shrink-0" style="width: 140px;">备注：</label>
                  <div class="pr-4 flex-grow-1">
                    <v-textarea
                      v-model="baseInfo.remark"
                      counter
                      rows="2"
                      no-resize
                      clearable
                      >
                    </v-textarea>
                  </div>
                </v-row>
              </v-col>
            </v-row>
          </v-container>
        </v-card>
      </v-form>
    </section>
  </CustomTableCard>
</template>

<script>
import mixin from './mixin'
import { getScenicList, setStatus } from '@/api/scenic'

export default {
  name: 'reservationHotel',
  mixins: [mixin],
  created() {
    console.log('created')
    this.getList()
  },
  activated() {
    this.getList()
    console.log('activated')
  },
  deactivated() {
    console.log('deactivated')
  },
  data() {
    return {
      tableHeight: 500,
      showDrawer: false,
      queryParams: {
        page: 1,
        limit: 20,
        status: '',
        info_type_id: undefined,
        city_id: undefined,
        keyword: ''
      },
      multipleSelection: [],
      tableData: [],
      total: 0,
      data: [],

      baseInfo: {
        id: undefined,
      },

      rules: {
        required: value => !!value || 'required',
      }
    }
  },

  methods: {
    getList(page) {
      if (/\d+/.test(page)) {
        this.queryParams.page = page
      }
      getScenicList(this.queryParams).then(response => {
        this.total = response.data.count
        this.tableData = response.data.data
      }).finally(() => {

      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 右侧窗口关闭事件
    handleCancel() {
      this.resetForm()
    },
    // 重置表达数据和验证
    resetForm () {
      // Object.assign(this.baseInfo, this._baseInfo)
      // this.$refs.form.resetValidation()
    },
    handleOk() {

    },
    // 删除列表
    handleRmove(row) {
      let ids = []
      if (row) {
        ids = [row.id]
      } else {
        ids = this.multipleSelection.map(item => item.id)
      }
      this.$confirm(this.$t('tips.delete'), this.$t('other.tip'), {
        center: true,
        type: 'warning'
      }).then(() => {
        removeSpOrder({idArr: ids}).then(() => {
          this.$message.success('success')
          this.getList()
        })
      }).catch(() => {})
    },
    setStatusAll(status) {
      let data = this.multipleSelection.map(item => {
        return {
          id: item.id,
          status: status
        }
      })
      this.updateStatus({listData: data})
    },
    setStatus(row, status) {
      this.updateStatus({listData: [{id: row.id, status: status}]})
    },
    updateStatus(params) {
      setStatus(params).then(() => {
        // this.$message({
        //   type: 'success',
        //   message: 'success!'
        // })
        this.getList()
      })
    },
  }
}
</script>
<style>
  .form-item-border {
    outline: 1px solid #dcdee0;
    background: #fff;
    min-height: 70px;
  }
</style>
